<style>
    .step-content th {
        width: 100px;
    }
    .step-content td,.step-content th {
        padding: 5px;
        vertical-align: middle;
    }
    #continue-buttons button {
        color: #ffffff;
        border-radius: 3px;
        background-color: #0b83d1;
        padding: 10px 20px;
        border: none;
        transition: all linear .2s;
        margin: 0 17px;
        font-size: 16px;
    }
    #continue-buttons button:hover {
        box-shadow: 0px 2px 8px rgba(0,0,0, .75);
    }
    #continue-buttons button:active {
        box-shadow: 3px 3px 3px rgba(0,0,0, .62) inset;
    }
    #master_card_ext_info {
        position: absolute;
        z-index: 9999;
        top: -235px;
        left:0; right:0;
        height: 260px;
        background-color: #ffffff;
        border: 1px solid #999;
        border-top:none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        transition: all ease 1s;
        text-align: center;
        box-shadow: 0 2px 5px #999;
        display: none;
    }
    #master_card_ext_info td,#master_card_ext_info th {
        padding : 8px;
    }
</style>
<!-- start 弹出层-新增充值 -->
<div class="hint-content" id="many_park_manager_edit_frame">
    <section>
        <div class="step one" style="width: 882px;">
            <div class="step-heads">
                <div class="step-head" data-no="1" style="z-index: 100001; box-shadow: 0 2px 5px #bbb;">
                    <div class="step-title">通行证信息</div>
                    <div class="step-desc">将要充值/延期的通行证的信息(请仔细确认)</div>
                </div>
            </div>
            <div class="step-content" style="height: 600px;">
                <div class="step-content-item" data-on="1" style="display: block; position: relative; overflow: hidden; height: 550px;">
                    <!-- 滑出层 -->
                    <section id="master_card_ext_info">
                        <div class="lonix frame" style="margin: 0 15px; margin-top:25px;">
                            <div class="lonix frame-title">主卡关键信息</div>
                            <div class="lonix frame-content">
                                <table style="width: 100%;">
                                    <tr>
                                        <th>通行证编号：</th>
                                        <td colspan="3" style="position: relative;"><input disabled type="text" style="position: absolute; top:0; width: 100%; left:0; right:0; border:none; text-align: center" class="k-textbox" placeholder="*系统自动生成*" id="master_card_uniqueIdentifier" /></td>
                                    </tr>
                                    <tr>
                                        <th>通行证卡别：</th>
                                        <td><input type="text" readonly id="master_card_category" class="k-textbox"  /></td>
                                        <th>通行证类型：</th>
                                        <td><input type="text" readonly id="master_card_type" class="k-textbox" /></td>
                                    </tr>
                                    <tr>
                                        <th>车主姓名：</th>
                                        <td><input class="k-textbox" readonly type="text" id="master_card_ownerName" /></td>
                                        <th>车牌号：</th>
                                        <td><input class="k-textbox" readonly type="text" id="master_card_vehicleNo" /></td>
                                    </tr>
                                    <tr>
                                        <th>联系电话：</th>
                                        <td><input readonly class="k-textbox" type="text" id="master_card_ownerPhone" /></td>
                                        <th>印刷号：</th>
                                        <td><input readonly class="k-textbox" type="text" id="master_card_printingNo" /></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <p style="position: absolute; bottom: 5px; left:50%; margin-left: -91px;">此卡为副卡，点我查看主卡信息</p>
                    </section>
                    <!-- 滑出层 -->

                    <div class="lonix frame" style="margin-top:25px; padding:5px;">
                        <div class="lonix frame-title">车主信息</div>
                        <div class="lonix frame-content">
                            <table style="width:100%">
                                <tr>
                                    <th>车主编号：</th>
                                    <td class="no-1-ownerCode" style="position: relative; width: 300px;"><input readonly class="search_owner_info" style="border:none; padding:0px; position: absolute;bottom:0;left:0; width: 100%; height:100%; background-color: #eee;" /></td>
                                    <th>车主名称：</th>
                                    <td><span class="no-1-ownerName"></span></td>
                                </tr>
                                <tr>
                                    <th>所属组织：</th>
                                    <td><span class="no-1-organization"></span></td>
                                    <th>联系电话：</th>
                                    <td><span class="no-1-ownerPhone"></span></td>
                                </tr>
                                <tr>
                                    <th>联系地址：</th>
                                    <td colspan="3"><span class="no-1-ownerAddress"></span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div style="margin:40px 0;">

                    </div>
                    <div class="lonix frame" style=" margin-top:5px; padding:5px;">
                        <div class="lonix frame-title">通行证信息</div>
                        <div class="lonix frame-content">
                            <table id="need_commit_table" style="width: 100%">
                                <tr>
                                    <th>搜索：</th>
                                    <td><input placeholder="车牌号/手机号码" type="text" class="k-textbox" id="search_traffic_permit" /></td>
                                    <th>通行证编号：</th>
                                    <td><input readonly class="k-textbox" id="uniqueIdentifier" /></td>
                                </tr>
                                <tr>
                                    <th>通行证卡别：</th>
                                    <td><input type="text" readonly class="k-textbox" id="category" /></td>
                                    <th>通行证类型：</th>
                                    <td><input type="text" readonly id="trafficType" /></td>
                                </tr>
                                <tr>
                                    <th>当前到期时间：</th>
                                    <td><input readonly type="text" id="beginTime" data-bind="value:beginTime" /></td>
                                    <th>有效时间：</th>
                                    <td>
                                        <input type="text" id="selectMonth" data-bind="value:selectMonth" style="width: 85px;">
                                    </td>
                                </tr>
                                <tr>
                                    <th>充值后时间：</th>
                                    <td><input disabled bdPicker="format:'yyyy/M/d' " type="text" id="endTime" data-bind="value:endTime" /></td>
                                </tr>
                                <tr>
                                    <th>车位数量：</th>
                                    <td><input class="k-textbox" readonly type="text" id="spaceNumber" data-bind="value:spaceNumber" /></td>
                                    <th>车牌号：</th>
                                    <td><input class="k-textbox" readonly type="text" id="vehicleNo" data-bind="value:vehicleNo" /></td>
                                </tr>
                                <tr id="discount">
                                    <th>包期优惠：</th>
                                    <td><input type="text" id="preferential" /></td>
                                    <th>收费金额：</th>
                                    <td><input style="border: 2px solid crimson; padding: 6px; transition:all linear .2s;" id="balance" type="text" data-bind="value:balance" maxlength="10" required
                                               validationMessage="金额只能为数字"
                                               pattern="^[0-9]*$" value="0" onfocus="this.style.backgroundColor = '#eee'" onblur="this.style.backgroundColor = '#fff'" /></td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <div id="finalMoney" style="display: inline-block; float: right">
                                            原需缴纳金额<span id="sourceMoney"></span>元&nbsp;
                                            <span id="calc" style="color: red"></span>
                                            <span style="color: green">最终需缴纳金额为：￥</span>
                                            <span id="resultMoney" style="font-size:24px; color: darkgreen"></span>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="button-frame">
                        <span>请先仔细核对信息</span>&nbsp;&nbsp;
                        <a href="javascript:void(0)" class="finish-step" data-bind="click:single_pre_paid">充值一笔</a>
                        <a href="javascript:void(0)" class="finish-step" data-bind="click:batch_pre_paid">充值后继续</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- end 弹出层-新增充值 -->
<script>
    var numberArrayForChargesLog = "0123456789.";
    var chargesLogPrePaid = new ChargesLogPrePaidVisual($('#many_park_manager_edit_frame'));
    $('#many_park_manager_edit_frame #balance').bind('keydown', function(e) {
        if (numberArrayForChargesLog.indexOf(e.key) == -1 && e.key != 'Backspace') {
            e.returnValue = false;
            return false;
        }
    }).bind('keyup', function(e) {
        var $val = $(this).val();
        if ($val == '') {
            $(this).val(0);
        }
        $val = $(this).val();
        if ($val.charAt(0) == '0' && $val.length > 1) {
            $(this).val($val.substring(1));
        }
        $val = $(this).val();
        if ($val.charAt(0) == '.') {
            $(this).val('0'+$val);
        }
        $val = $(this).val();
        if ($val.indexOf('.') != -1) {
            var a = $val.indexOf('.');
            var b = $val.lastIndexOf('.');
            if (a != b) {
                $(this).val($val.substring(0, $val.length-1));
            }
            $val = $(this).val();
            if ($val.indexOf('.') != -1) {
                /* 如果输入为小数，则保留最后2位 */
                var temp = $val.substring($val.indexOf('.')+1);
                if (temp.length > 2) {
                    temp = temp.substring(0, 2);
                    $val = $val.substring(0, $val.indexOf('.'));
                    $val = $val + '.' + temp;
                    $(this).val($val);
                }
            }
        }
        $('#many_park_manager_edit_frame #sourceMoney').html($(this).val());
        chargesLogPrePaid.calcMoney();
    });
    $('#many_park_manager_edit_frame #master_card_ext_info').bind('mouseup', function(e) {
        var hei = $(this)[0].offsetTop;
        if (hei == 0) {
            $(this)[0].style.top = '-235px';
        } else {
            $(this)[0].style.top = '0px';
        }
    });
</script>